<template>
  <a-row :gutter="24">
    <a-col :md="4" :sm="24">
      <a-card :bordered="false" class="header-card">
        <div class="divider-content-only divider-content-center-only">
          <a-divider
          type="vertical"
          class="divider-only" />
          房產
        </div>
        <div class="demo-infinite-container" :infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
          <a-list :data-source="data" class="scrll" :split="false">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-list-item-meta>
                <a slot="title" @click="selected(item.id,'1', '', '')">
                  <a-card :bordered="false" class="llld" :class="{ active: activeName === item.id }">
                    <p class="msi" :class="{ fontActive: activeName === item.id }">{{ item.name }}</p>
                    <p class="msi">{{ item.rentTotal}}/{{ item.total}}</p>
                  </a-card>
                </a>
              </a-list-item-meta>
            </a-list-item>
            <div v-if="loading && !busy" class="demo-loading-container">
              <a-spin />
            </div>
          </a-list>
          <a-divider style="margin:6px 0px"/>
          <a  @click="selected('0','2', '', '')">
                  <a-card :bordered="false" class="llld" :class="{ active: activeName === '0' }">
                    <p class="msi" :class="{ fontActive: activeName === '0' }">分散式房產</p>
                    <p class="msi">無樓層</p>
                  </a-card >
          </a>
        </div>
        <div class="foot-h">
          <a-row>
            <a-col :span="24">
              <a-button
              class="butspace"
              size="small"
              type="primary"
              @click="$refs.addForm.add()" >添加房產</a-button>
              <a-button
              size="small"
              type="primary"
              @click="exportExcelByType()">導出</a-button>
            </a-col>
          </a-row>
        </div>
        <add-form ref="addForm" @ok="handleOk" />
      </a-card>
    </a-col>
    <a-col :md="20" :sm="24">
      <a-card :bordered="false">
        <div>
          <a-row :gutter="[0,16]">
            <a-col :span="12">
              <div class="rel-row1-name"><a-icon type="bank" class="rel-row1-name-icon"/>{{ roomData.name }}
                 <a-button size="small"  @click="updateFz(roomData, '1')" >修改</a-button>
                  <a-button size="small"  @click="deleteFz(roomData.id)" type="danger" ghost>
                    刪除
                  </a-button>
              </div>
            </a-col>
            <a-col :span="12">
              <a-input-search
                class="title-button title-button-search"
                placeholder="房間名"
                enter-button="搜索"
                v-model="searchName"
                @search="onSearch"
              />
              <a-button icon="plus" class="title-button" v-if="roomData.category === '1' || roomData.category === '2'" @click="addRoom(roomData.id, roomData.name, roomData.houseType, roomData.category, roomData.roompre, roomData.roomsuf)">添加房間</a-button>
              <a-button icon="plus" class="title-button" v-if="roomData.category === '1'" @click="addFloor(roomData.id, roomData.name)">添加樓層</a-button>
            </a-col>
          </a-row>
          <a-row v-if="roomData.category === '1'" >
            <a-col :span="24" >
              <a-descriptions size="default" >
                <a-descriptions-item label="負責人">
                 {{ roomData.principal }}
                </a-descriptions-item>
                <a-descriptions-item label="電話" >
                  {{ roomData.phone }}
                </a-descriptions-item>
            </a-descriptions>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-descriptions>
                <a-descriptions-item label="閑置率">
                   {{ roomData.xzl }}
                </a-descriptions-item>
                <a-descriptions-item label="縂租金">
                   {{ roomData.zzj }}
                </a-descriptions-item>
                <a-descriptions-item label="縂押金">
                    {{ roomData.zyj }}
                </a-descriptions-item>
            </a-descriptions>
            </a-col>
          </a-row>
          <a-divider style="margin:6px 0px"/>
          <a-row :gutter="[0,16]">
            <a-col :span="24">
              狀態：<a-button  type="dashed" size="small"  @click="getRoomsByType('1', '1')">全部</a-button><a-divider type="vertical"/>
              <a-button  type="dashed" size="small"  @click="getRoomsByType('1', '2')">閑置</a-button>
              <a-button  type="dashed" size="small"  @click="getRoomsByType('1', '3')">已租</a-button><a-divider type="vertical"/>
              <a-button  type="dashed" size="small"  @click="getRoomsByType('1', '4')"><a-badge color="yellow" text="預定"/></a-button><a-divider type="vertical"/>
              <a-button  type="dashed" size="small"  @click="getRoomsByType('1', '5')"><a-badge color="green" text="收租"/></a-button>
              <a-button  type="dashed" size="small"  @click="getRoomsByType('1', '6')"><a-badge color="orange" text="逾期"/></a-button>
              <!-- <a-button  type="dashed" size="small"  @click="getRoomsByType('1', '7')"><a-badge color="volcano" text="無賬單"/></a-button><a-divider type="vertical"/> -->
              <a-button  type="dashed" size="small"  @click="getRoomsByType('1', '8')"><a-badge color="purple" text="租約到期"/></a-button>
            </a-col>
          </a-row>
          <a-row :gutter="[0,16]">
            <a-col :span="24">
              戶型：<a-button  type="dashed" size="small" @click="getRoomsByType('2', '')">全部</a-button>
              <a-button type="dashed" size="small" v-for="(roomTypeItem) in roomData.roomTypeList" :key="roomTypeItem.roomType" @click="getRoomsByType('2', roomTypeItem.roomType)">{{ roomTypeItem.roomTypeName }}</a-button>
            </a-col>
          </a-row>
          <a-divider style="margin:6px 0px"/>
        </div>
        <div>
          <a-row v-for="(item,index) in roomData.floorData" :key="index">
            <div class="divider-content-only divider-content-center-only" v-if="roomData.category === '1'">
              <a-divider type="vertical" class="divider-only"/>{{ item.name }}
              <a-button size="small" type="danger" @click="deleteLc(roomData.id,item.id)" ghost>刪除</a-button>
            </div>
            <div class="divider-content-only divider-content-center-only" v-if="roomData.category === '2'">
              <a-divider type="vertical" class="divider-only"/>{{ item.name }}
              <a-button size="small" @click="updateFz(item, '2')" >修改</a-button>
              <a-button size="small" @click="deleteFz(item.id)" type="danger" ghost>
                刪除
              </a-button>
              <span class="jieshao">負責人:  {{ item.principal }} </span> <span class="jieshao">電話:  {{ item.phone }}</span>
            </div>
            <div class="home-item" v-for="(itemRoom,itemRoomindex) in item.room" :key="itemRoomindex" :class="itemRoom.lease === 1 ? 'home-item-lase-active' : 'home-item-unlase-active'">
              <div class="home-item-content">
                <div class="home-item-content-div">{{ roomData.roompre }}{{ itemRoom.code }}{{ roomData.roomsuf }}</div>
                <div class="home-item-content-div">{{ itemRoom.roomTypeName }}</div>
                <div class="home-item-content-div">
                  <a-tag  v-for="(flag,flagindex) in itemRoom.flags" :key="flagindex" :color="flag.color" class="content-tag">
                    {{ flag.name }}
                  </a-tag>
                </div>
              </div>
              <div class="home-item-content-hover">
                <a-dropdown>
                  <a-menu slot="overlay">
                    <a-menu-item key="1" v-if="roomData.category === '1' && itemRoom.lease === 0" @click="$refs.addLeaseForm.add(3, { roomId: itemRoom.id, roomCode: roomData.name + '-' + itemRoom.code })"><a-icon type="audit"/>簽約房間</a-menu-item>
                    <a-menu-item key="1" v-if="roomData.category === '2' && itemRoom.lease === 0"  @click="$refs.addLeaseForm.add(3, { roomId: itemRoom.id, roomCode: item.name + '-' + itemRoom.code })"><a-icon type="audit"/>簽約房間</a-menu-item>
                    <a-menu-item key="2" v-if="itemRoom.lease === 1" @click="lookBillById(itemRoom.leaseid)"><a-icon type="pound"/>收取房租</a-menu-item>
                    <a-menu-item key="3" v-if="roomData.category === '1'" @click="$refs.reservationAddForm.add(2, { roomId: itemRoom.id, roomCode: roomData.name + '-' + itemRoom.code })"><a-icon type="history"/>添加預定</a-menu-item>
                    <a-menu-item key="3" v-if="roomData.category === '2'" @click="$refs.reservationAddForm.add(2, { roomId: itemRoom.id, roomCode: item.name + '-' + itemRoom.code })"><a-icon type="history"/>添加預定</a-menu-item>
                    <a-menu-item key="4" v-if="itemRoom.lease === 1" @click="$refs.leaseDetail.edit(itemRoom.leaseid)"><a-icon type="file-done"/>租約信息</a-menu-item>
                    <a-menu-item key="5" @click="editlRoom(itemRoom,roomData.name, roomData.category, roomData.roompre, roomData.roomsuf)"><a-icon type="bank"/>房間信息</a-menu-item>
                    <a-menu-item key="6" @click="confirmDelRoom(itemRoom.id)"><a-icon type="delete"/>刪除房間</a-menu-item>
                  </a-menu>
                  <a-button style="margin-left: 8px" class="caozuo-but">操作<a-icon type="down" /> </a-button>
                </a-dropdown>
              </div>
            </div>
          </a-row>
        </div>
        <edit-form ref="editForm" @ok="handleEditOk" />
        <add-floor-form ref="addFloorForm" @ok="handleFloorOk" />
        <add-room-form ref="addRoomForm" @ok="handleFloorOk" />
        <edit-room-form ref="editRoomForm" @ok="handleFloorOk" />
        <add-lease-form ref="addLeaseForm" @ok="handleFloorOk" />
        <lease-detail ref="leaseDetail"/>
        <reservation-add-form ref="reservationAddForm" @ok="handleFloorOk"/>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import { busRealEstateDelete, busRealEstateList, detailByType, exportExcel } from '@/api/modular/main/busrealestate/busRealEstateManage'
import { busRealEstateFloorDelete } from '@/api/modular/main/busrealestatefloor/busRealEstateFloorManage'
import { busRoomDelete } from '@/api/modular/main/busroom/busRoomManage'
import addForm from './addForm.vue'
import editForm from './editForm.vue'
import addFloorForm from './addFloorForm.vue'
import addRoomForm from './addRoomForm.vue'
import editRoomForm from './editRoomForm.vue'
import addLeaseForm from '../houselease/addForm.vue'
import leaseDetail from '../houselease/leaseDetail.vue'
import reservationAddForm from '../roomreservation/addForm.vue'

export default {
  components: {
    addForm,
    editForm,
    addFloorForm,
    addRoomForm,
    editRoomForm,
    addLeaseForm,
    leaseDetail,
    reservationAddForm
  },
  data() {
    return {
      data: [],
      estateId: '',
      estateType: '',
      roomData: {},
      searchName: '',
      loading: false,
      busy: false,
      activeName: ''
    }
  },
  created() {
    this.getDataListState()
  },
  methods: {
    //  查詢類型  房產類型
    getRoomsByType (searchType, searchValue) {
      this.selected(this.estateId, this.estateType, searchType, searchValue)
    },
    onSearch() {
      if (!this.searchName) {
        this.$message.warning('請輸入房間名稱')
      } else {
        this.selected(this.estateId, this.estateType, '0', this.searchName)
        this.searchName = ''
      }
    },
    /**
     * gameName 房產id
     * type 房產類型
     * searchType  查詢類型
     * searchValue  查詢值
     */
    selected (gameName, type, searchType, searchValue) {
      this.activeName = gameName
      this.estateId = gameName
      this.estateType = type
      this.getFzDetalByIdAndType(gameName, type, searchType, searchValue)
    },
    handleOk() {
      this.getDataListState()
    },
    handleEditOk(type) {
      if (type === '1') {
        this.getDataListState()
      } else {
        this.selected(this.estateId, '2', '', '')
      }
    },
    getFzDetalByIdAndType(gameName, type, searchType, searchValue) {
       detailByType({ id: gameName, category: type, searchType: searchType, searchValue: searchValue }).then((res) => {
        if (res.code === 200) {
          this.roomData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getDataListState() {
      busRealEstateList().then((res) => {
        if (res.code === 200) {
          this.data = res.data
          if (this.data.length > 0) {
            this.selected(this.data[0].id, '1', '', '')
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    updateFz(roomData, type) {
      this.$refs.editForm.edit(roomData, type)
    },
    // 刪除房產
    deleteFz(id) {
      const self = this
      this.$confirm({
        title: '确认删除房產？',
        content: '',
        onOk() {
          return new Promise((resolve, reject) => {
            busRealEstateDelete({ id: id }).then((res) => {
              if (res.code === 200) {
                self.$message.success(res.msg)
                if (self.estateType === '1') {
                  self.getDataList()
                } else {
                  self.selected(self.estateId, '2', '', '')
                }
              } else {
                self.$message.error(res.msg)
              }
            }).finally(() => {
               resolve()
            })
         })
        },
        onCancel() {}
      })
    },
    // 刪除樓層
    deleteLc(stateId, id) {
      const self = this
      this.$confirm({
        title: '确认删除樓層？',
        content: '',
        onOk() {
          return new Promise((resolve, reject) => {
           busRealEstateFloorDelete({ estateid: stateId, id: id }).then((res) => {
              if (res.code === 200) {
                self.selected(self.estateId, self.estateType, '', '')
                self.$message.success(res.msg)
              } else {
                self.$message.error(res.msg)
              }
            }).finally(() => {
               resolve()
            })
         })
        },
        onCancel() {}
      })
    },
    // 增加樓層
    addFloor(id, name) {
      this.$refs.addFloorForm.add(id, name)
    },
    handleFloorOk() {
       this.selected(this.estateId, this.estateType, '', '')
    },
    // 增加房間
    addRoom(id, name, houseType, category, roompre, roomsuf) {
      this.$refs.addRoomForm.add(id, name, houseType, category, roompre, roomsuf)
    },
    // 修改房间信息
    editlRoom(record, fcName, category, roompre, roomsuf) {
      this.$refs.editRoomForm.edit(record, fcName, category, roompre, roomsuf)
    },
    // 刪除房間
    confirmDelRoom(id) {
      const self = this
      this.$confirm({
        title: '确认删除房间？',
        content: '',
        onOk() {
          return new Promise((resolve, reject) => {
            busRoomDelete({ id: id }).then((res) => {
              if (res.code === 200) {
                self.selected(self.estateId, self.estateType, '', '')
                self.$message.success(res.msg)
              } else {
                self.$message.error(res.msg)
              }
            }).finally(() => {
               resolve()
            })
         })
        },
        onCancel() {}
      })
    },
    // 房租收取
    lookBillById (id) {
      this.$router.push({ path: '/housebilldetailbyid', query: { id: id } })
    },
     exportExcelByType() {
        exportExcel().then((res) => {
             this.downloadfile(res)
        })
      },
      downloadfile (res) {
        var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
        var contentDisposition = res.headers['content-disposition']
        var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
        var result = patt.exec(contentDisposition)
        var filename = result[1]
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        var reg = /^["](.*)["]$/g
        downloadElement.style.display = 'none'
        downloadElement.href = href
        downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href)
      }
  }
}
</script>
<style lang="less">
.jieshao{
  font-size:14px;
  margin-left: 10px;
}
.caozuo-but{
  color: rgb(252, 248, 248);
  background-color: #06adfa;
  border: solid 0px #ccc;
}
.home-item-content-div{
  height: 30%;
  margin-bottom: 2px;
  .content-tag{
    border-radius: 6px;
    float: right;
  }
}
.home-item:hover .home-item-content-hover {
  color: #656e73;
  opacity: 1;
  z-index: 1000;
}
.home-item:hover{
  opacity: 0.6;
}

.home-item-content{
  width: 100%;
  opacity: 1;
  z-index: 999;
  position: absolute;
  float: left;
  padding: 10px;
  left: 0;
  top: 0;
  height: 100%;
}
.home-item-lase-active{
   background-color:#5ac0f0;
}
.home-item-unlase-active{
   background-color:#ccc;
}
.home-item{
  height:82px;
  width:175px;
  float: left;
  position: relative;
  margin: 10px;
  border-radius: 6px;
  .home-item-content-hover{
    width: 100%;
    height: 100%;
    z-index: 998;
    text-align: center;
    opacity: 0;
    position: absolute;
    float: left;
    left: 0;
    top: 0;
    transition: 0.1s;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}
.zujin-i{
  margin-bottom: 0px;
}
.card-item-tag{
  float: right;
}
.card-item .ant-card-body{
  padding:5px;
}
.room-item{
  background-color: turquoise;
}
.span-space{
  margin-left: 12px;
}
.brage .ant-badge-status-text{
  color: rgb(20, 20, 20);
}
.title-button-search{
  width: 200px;
}
.title-button{
  float:right;
}
.msi {
  padding: 0px;
  margin-bottom: 3px;
}
.active {
  background-color: rgb(216, 243, 247);
}
.fontActive {
  color: rgb(53, 145, 231);
}
.header-card {
  padding: 0px;
}
.header-card .ant-card-body {
  padding: 0px;
}
.llld .ant-card-body {
  padding: 0px 0px 0px 20px;
  border-radius: 5px;
}
.ant-list-item {
  padding: 0px;
}
.item-home-card-p {
  padding: 0px;
  margin: 4px;
  color: rgb(252, 246, 246);
}
.item-home-card .ant-card-body {
  background-color: #4a86e8;
  padding: 5px;
  border-radius: 5px;
}
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
.divider-only {
  background-color: rgb(67, 136, 212);
  width: 5px;
  height: 1.9em;
}
.divce {
  border-top: solid 1px #ccc;
  padding-top: 5px;
}
.divider-only-s {
  background-color: rgb(67, 136, 212);
  width: 2px;
  height: 1.9em;
}
.divider-content-only {
  font-size: 20px;
  margin-bottom: 10px;
}
.zt {
  margin-left: 20px;
}
.divider-content-center-only {
  margin-top: 10px;
}
.scrll {
  height: 500px;
  overflow-y: auto;
}
.scrll::-webkit-scrollbar {
  width: 8px;
}
.scrll::-webkit-scrollbar-track {
  background-color: rgb(250, 241, 241);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.scrll::-webkit-scrollbar-thumb {
  background-color: rgb(205, 209, 205);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.rel-row1-name{
  font-size: 25px;
}
.rel-row1-name-icon{
  color: #4a86e8;
  margin-right: 2px;
}
.foot-h {
  border-top: solid 1px #ccc;
  padding: 15px 20px;
}
.name-home {
  width: 100%;
}
.name-home-button {
  margin-left: 10px;
  font-size: 15px;
}
.name-home-item2 {
  margin-top: 10px;
}
.name-home-update {
  color: rgb(70, 164, 218);
}
.name-home-del {
  color: red;
}
.name-home-button-text {
  margin-left: 55px;
}
.number-item {
  color: #000;
}
.butspace{
  margin-bottom: 4px;
}
</style>
